import { PureComponent } from "react"
import { connect } from "react-redux"
import { fetchDataListAction } from "../../../store/actionCreators"

class Com1 extends PureComponent {
  componentDidMount() {
    // this.props.changeBannerList()
  }

  render() {
    const { bannerList } = this.props
    return (
      <div>
        <ul>
          <h3>banners:</h3>
          {bannerList.map((banner, index) => (
            <li key={index}>{banner.title}</li>
          ))}
        </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  bannerList: state.bannerList
})

const mapDispatchToProps = (dispatch) => ({
  changeBannerList() {
    dispatch(fetchDataListAction())
  }
})
export default connect(mapStateToProps, mapDispatchToProps)(Com1)
